<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #a{
          border: 1px solid black;
        }
    </style>

</head>
<body>
    <canvas id="a" width="600" height="300">
    </canvas>
    <script>
        var canvas = document.getElementById('a');
        var context = canvas.getContext('2d');

        var items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];

        context.font = "15px Arial";
        for(var i=1; i< items.length+1; i++){
            context.fillText(items[i-1],4, i*20);
        }

        context.beginPath();
        var y_line_h = 20;
        var x_begin = 45;
        var len_line = 40
        for(var i=1; i< items.length+1; i++){

                context.moveTo(x_begin, i*y_line_h-5);

                var x_inn =2*x_begin + (((i-2)>0)?(i-2)*len_line:0);
                context.lineTo(x_inn, i*y_line_h-5);
                if(i==1){
                    context.lineTo(2*x_begin, (i+1)*y_line_h-5);

                    context.moveTo(2*x_begin, i*y_line_h+5);
                    context.lineTo(2*x_begin+((items.length-1)*len_line), i*y_line_h+5);
                } else if(i>2){
                    context.moveTo(x_inn, i*y_line_h-5);
                    context.lineTo(x_inn, y_line_h+5);
                }

        }

        context.stroke()

        /*context.beginPath();
        context.moveTo(40, 15);
        context.lineTo(80, 15);
        context.lineTo(80, 35);
        context.stroke();

        context.moveTo(40, 35);
        context.lineTo(80, 35);
        context.stroke();

        context.moveTo(80, 25);
        context.lineTo(130, 25);
        context.stroke();



        context.moveTo(40, 55);
        context.lineTo(120, 55);
        context.stroke();

        context.moveTo(120, 55);
        context.lineTo(120, 25);
        context.stroke();*/



    </script>
</body>
</html>